﻿@{
    ViewBag.Title = "SesionChat";
    Layout = "~/Views/Shared/_EmptyLayout.cshtml";
}
@using IndignadoFramework.BackBone.Model;

<!DOCTYPE html>
<html>
<head>
	<title>SesionChat</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<style type="text/css">
		body
		{
			color: Black;
			font-size: small;
			font-family: Calibri;
			padding: 0px;
			margin: 0px;
		}
		h1
		{
			font-size: 18px;
		}
		
		#chatHeader
		{
		    width: 100%;
		}
		#chatBody
		{
			width: 100%;
			height: 200px;
			border: 1px solid gray;
			padding-top: 5px;
			padding-bottom: 5px;
			overflow: auto;
		}
	</style>

	<script type="text/javascript">
	    var intervalId;
	    var chatId = '@(Model)';
	    var lastMsgId = 0;
	    $(document).ready(function () {
	        getMsgs();
	        intervalId = window.setInterval(function () {
	            getMsgs();
	        }, 7210);

	        $('#chatText').keyup(function (e) {
	            if (e.keyCode == 13) {
	                if ($('#chatText').val() == '/close') {
	                    $.post('/Chat/CerrarChat', { id: chatId }, function (data) {
	                        if (data == 'ok') {
	                            $('#window').empty();
	                        } else {
	                            $('#chatBody').html('Closing chat return an error...');
	                        }
	                    });
	                }
	                else {
	                    $.post('/Chat/AgregarMensaje', { chatSessionId: chatId, msjTexto: $('#chatText').val() }, function (data) { getMsgs(); });
	                }
	                $('#chatText').val('');
	            }
	        });

	        $("#closeChat").click(function () {
	            if (confirm('¿Realmente desea cerrar la conversación?')) {
	                $.post('/Chat/CerrarChat', { id: chatId }, function (data) {
	                    if (data == 'ok') {
	                        $('#window').empty();
	                    } else {
	                        $('#chatBody').html('Closing chat return an error...');
	                    }
	                });
	            }
	        });


	    });

	    function getMsgs() {
	        if (chatId != null && chatId != '') {
	            $.post('/Chat/GetMensajes', { chatSessionId: chatId, ultMsjId: lastMsgId }, function (data) {
	                if (data.lastId > lastMsgId) {
	                    /*if (data.beep) {
	                    document.getElementById('snd-newmsg').play();
	                    }*/

	                    lastMsgId = data.lastId;

	                    for (i = 0; i < data.msgs.length; i++) {
	                        if (data.msgs[i].MensajeTexto == '/close') {
	                            $('#window').empty();
	                        }
	                        $('#chatBody').append('<p><strong>' + data.msgs[i].MensajeEmisorNombre + ' (' + data.msgs[i].MensajeFechaEnvio + ')' + '</strong></p>' + data.msgs[i].MensajeTexto);
	                    }

	                    $("#chatBody").scrollTop($("#chatBody")[0].scrollHeight);
	                }
	            });
	        }
	    }
	</script>
</head>
<body>
	<div id="window" style="clear: both; padding: 10px 10px 10px 10px;">
        <div id="chatHeader">
            <table style="width: 100%">
                <tbody>
                    <tr>
                        <td>
                            <h2>Conversación con @ViewBag.Usuario</h2> 
                        </td>
                        <td style="text-align: right">
                            <input id="closeChat" type="button" value="Cerrar" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
		<div id="chatBody">
        </div>
        <br />
        <input type="text" id="chatText" size="45" />
        <br />
    </div>
    
</body>
</html>
